<template>
	<view class=" box-content-f" @click="itemClick">
		<view class="record-content">
			<view class="time">
				<span>睡眠时间</span>：{{formatTime()}}
			</view>
			<view class="content">
				<span>睡眠质量</span>：<u-rate v-model="record.rankVal" size="40" active-color="#DA473A" :disabled="true"></u-rate>
			</view>
		</view>
		<div v-if="state" class="box-icon-f">
			<u-icon name="arrow-right"></u-icon>
		</div>
	</view>
</template>

<script>
	import { formatDateByTimestamp } from '@/utils/utils.js'
	export default {
		name: "Sleep",
		props: {
			record: {
				type: Object,
				default () {
					return null;
				}
			},
			state: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
	
			};
		},
		methods:{
			formatTime() {
				let begin = formatDateByTimestamp(this.record.sleepTime, 'hh:MM');
				let end = formatDateByTimestamp(this.record.wakeupTime, 'hh:MM');
				return `${begin}-${end}`;
			},
			
			formatContent() {
				return '';
			},
			
			itemClick() {
				this.$emit('itemClick')
			}
		}
	}
</script>

<style lang="scss">
	.box-content-f{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 35rpx;
		background: #ffffff;
		line-height: 59rpx;
		padding: 20rpx 20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	span {
		color: #999999;
	}
	.box-icon-f{
		font-size: 30rpx;
	}
	.record-content{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>
